import type { GetServerSideProps, NextPage } from 'next'
import Head from 'next/head'

import styles from '../../styles/Cars.module.scss'

import router from 'next/router'
import {  DingdanService } from '../../services'
import { Form, Input, List, TextArea, Toast, Image, Tag, Space } from 'antd-mobile'
import { Warnicon, Winicon } from '../../components/Icon'
import { IBooks } from '../../models/types'
import Back from '../../components/Back'

interface Props {
  choices: string[]
  books: IBooks[]
  price: number
}

export const getServerSideProps: GetServerSideProps = async ctx => {
  const token = ctx.req.cookies.token
  const { choices, money } = ctx.query
  if (choices && money) {
    const bookids = typeof (choices) === 'string' ? [choices] : choices
    const bookRes = await DingdanService.booklist(bookids as string[], token)
    if (bookRes.stat === 'OK')
      return {
        props: {
          books: bookRes.rows,
          price: money as string,
          choices: typeof (choices) === 'string' ? [choices] : choices
        }
      }
  }
  return {
    redirect: {
      destination: '/cart',
      permanent: false
    }
  }
}

const Check: NextPage<Props> = ({ choices, books, price }) => {
  const [form] = Form.useForm()

  async function addDingdan() {
    const values = form.getFieldsValue()
    const res = await DingdanService.dingdan(choices, price, values)
    if (res.stat === 'OK') {
      Toast.show({ content: <Winicon text='下单成功' /> })
      router.push('/user/mine/dingdan')
    } else {
      Toast.show({ content: <Warnicon text='请补全内容' /> })
    }
  }

  return (
    <div className="page">
      <Head>
        <title>下单</title>
      </Head>
      <div className="wrap">
        <Form layout='horizontal' form={form} >
          <Form.Header>填写收货人信息</Form.Header>
          <Form.Item name='name' label='姓名 :'>
            <Input clearable placeholder='收货姓名' />
          </Form.Item>
          <Form.Item name='address' label='地址 :'>
            <Input clearable placeholder='收货地址' />
          </Form.Item>
          <Form.Item name='phone' label='电话 :'>
            <Input clearable type='number' placeholder='联系电话' />
          </Form.Item>
          <Form.Item name='note' required >
            <TextArea
              placeholder='购买备注'
              showCount
              maxLength={20}
            />
          </Form.Item>
        </Form>
        <List header={<h3>{`共${books.length}本`}</h3>}>
          {
            books?.map(item =>
              <List.Item key={item._id}
                prefix={
                  <div className={styles.img}>
                    <Image alt='' src={item.book.banner[0]} fit='cover' width={60} height={80} />
                  </div>
                }
                extra={item.allprice + ' 元'}
                description={item.names.map((v, i) =>
                  <Space key={i}>
                    <Tag >{v}</Tag> &nbsp;
                  </Space>)}
              >{item.book.title}
              </List.Item>
            )
          }
        </List>
        <Back />
      </div>
      <div className={styles.bottom}>
        <div className={styles.total}>
          <p>合计: </p>
          <span>¥{Math.abs(price).toFixed(2)}元</span>
        </div>
        <div className={styles.pay} onClick={addDingdan}>去支付</div>
      </div>
    </div>
  )
}

export default Check
